<template>
  <div :key="pageRenderKey" style="width: 100%">
    <i v-if="isFetching" class="el-icon-loading" color="#409EFF"></i>
    <el-form
      v-else
      ref="refClerkForm"
      :model="clerk"
      :rules="rules"
      :inline="true"
      :inline-message="false"
      size="small"
      label-width="100px"
      style="width: 100%">
      <el-form-item label="所属店铺" prop="sid">
        <el-select
          v-model="clerk.sid"
          style="width: 280px"
          placeholder="请选择"
          :disabled="EditMode.m == EditMode.EditClerk || (salonList && salonList.length === 1)">
          <el-option v-for="item in salonList" :key="item.id" :label="item.sname" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属管家" prop="kid">
        <el-select v-model="clerk.kid" style="width: 280px" placeholder="请选择">
          <el-option v-for="item in keeperList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-divider></el-divider>

      <el-form-item>
        <el-form-item label="姓名" prop="cname">
          <el-input v-model="clerk.cname" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="clerk.sex" class="radio_list">
            <el-radio-button v-for="item in genderList" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="运营状态" prop="dengji">
          <el-radio-group v-model="clerk.dengji" class="radio_list">
            <el-radio-button v-for="item in dengjiList" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="需求大小" prop="demandLevel">
          <el-radio-group v-model="clerk.demandLevel" class="radio_list">
            <el-radio-button v-for="item in demandLevelList" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="顾客编号">
          <el-input v-model="clerk.ccode" style="width: 220px" disabled></el-input>
        </el-form-item>
        <el-form-item label="生日(阳历)" prop="solar">
          <el-input v-model="clerk.solar" style="width: 220px" disabled></el-input>
          <el-button
            type="primary"
            size="small"
            style="margin: 0 0 0 5px"
            @click.stop="() => (calendarPage.showCalendar = true)">
            选择
          </el-button>
        </el-form-item>
        <el-form-item label="生日(阴历)" prop="lunar">
          <el-input v-model="clerk.lunar" style="width: 220px" disabled></el-input>
        </el-form-item>
        <el-form-item label="出生时间" prop="btime">
          <el-time-picker
            v-model="clerk.btime"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="出生时间"
            style="width: 220px"></el-time-picker>
        </el-form-item>
        <el-form-item label="生日类别" prop="birthdayType">
          <el-radio-group v-model="clerk.birthdayType" class="radio_list">
            <el-radio-button v-for="item in birthdayTypeList" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生城市">
          <el-input v-model="clerk.city" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="clerk.address" placeholder="顾客的居住地址" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="clerk.tel" placeholder="顾客的电话或微信号" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="上传主图" prop="pic">
          <el-upload
            class="upld_img_m"
            action="/"
            :before-upload="handleFileBeforeUpload"
            :on-progress="handleFileUploading"
            :on-success="handleFileUploadOk"
            :on-error="handleFileUploadError"
            :http-request="handleImgMainUpload"
            :show-file-list="false"
            :auto-upload="true"
            :multiple="false"
            :disabled="imgUpld.isUploading"
            accept=".png,.jpg,.jpeg">
            <img v-if="imgUpld.mainPicUrl" :src="imgUpld.mainPicUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传辅图">
          <el-upload
            class="upld_img_s"
            action="/"
            :before-upload="handleFileBeforeUpload"
            :on-progress="handleFileUploading"
            :on-success="handleFileUploadOk"
            :on-error="handleFileUploadError"
            :on-remove="handleImgSubRemove"
            :http-request="handleImgSubUpload"
            :file-list="imgUpld.subPicList"
            :auto-upload="true"
            :multiple="false"
            :disabled="imgUpld.isUploading"
            :limit="3"
            accept=".png,.jpg,.jpeg"
            list-type="picture">
            <el-button size="small" type="primary">点击上传辅图</el-button>
            <div slot="tip" class="el-upload__tip">一次上传一张辅图, 最多能上传 3 张辅图</div>
          </el-upload>
        </el-form-item>
      </el-form-item>
    </el-form>
    <!--日历-->
    <div v-if="calendarPage.showCalendar" class="pick_birthday">
      <el-calendar v-model="calendarPage.selectedDate" :first-day-of-week="7">
        <template #dateCell="{ date, data }">
          <div
            :class="[
              'date_cell',
              { 'not-current-month': data.type !== 'current-month' },
              { 'is-selected': data.isSelected },
            ]"
            @click="handleClickCalDate(date)">
            <div class="lunar-content">
              <div style="font-size: 16px">{{ date.getDate() }}</div>
              <div class="lunar">{{ showLunar(date, data) }}</div>
              <div class="selected">{{ data.isSelected ? '✔️' : '' }}</div>
            </div>
          </div>
        </template>
      </el-calendar>
      <el-divider></el-divider>
      <div class="foot_inpt_date">
        <el-radio-group v-model="clerk.birthdayType" class="radio_list" size="small" @input="gotoInputDate(1)">
          <el-radio-button :label="1">公历</el-radio-button>
          <el-radio-button :label="2">农历</el-radio-button>
        </el-radio-group>
        <div>
          <el-input v-model="calendarPage.inputYear" placeholder="阿拉伯" style="width: 110px" size="small">
            <template slot="append">年</template>
          </el-input>
        </div>
        <div>
          <el-input
            v-model="calendarPage.inputMonth"
            placeholder="数字"
            style="width: 100px"
            size="small"
            @input="gotoInputDate(0)">
            <template slot="append">月</template>
          </el-input>
        </div>
        <div style="margin: 0 0 0 5px; padding-top: 5px">
          <el-checkbox v-if="calendarPage.showLeepMonth" v-model="calendarPage.jmpLeepMonth">闰月</el-checkbox>
        </div>
        <div style="margin: 0 0 0 5px">
          <el-button type="primary" size="small" @click.stop="gotoInputDate(1)">跳转</el-button>
        </div>
        <div style="margin: 0 0 0 5px">
          <el-button type="info" size="small" plain @click.stop="() => (calendarPage.showCalendar = false)">
            关闭
          </el-button>
        </div>
      </div>
      <div class="pick_birthday_close" @click.stop="() => (calendarPage.showCalendar = false)">
        <i class="el-icon-circle-close"></i>
      </div>
      <div class="pick_birthday_title">
        {{ calendarPage.lunarTitle }}
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import { getKeepersBySid } from '@/api/admin';
import { getSalon, upload } from '@/api/txs';
import WebConst from '@/utils/const/web-const';
import { lunar } from '@/utils/lunar';
import Compressor from 'compressorjs';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EditMode = { m: 1, AddNewClerk: 1, EditClerk: 2 };

export default {
  name: 'ClerkInfo',
  props: {
    mode /* 1-新增; 2-编辑 */: {
      type: Number,
      required: true,
    },
    cdata /* 编辑模式下传入顾客数据 */: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      pageRenderKey: 1,
      isFetching: false,
      clerkAddDefault: {
        birthdayType: 1,
        dengji: 0,
        btime: '',
      },
      clerk: this.cdata,
      rules: {
        cname: [{ required: true, message: '必填项', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        // kid: [{ required: true, message: '请选择管家', trigger: 'blur' }],
        pic: [{ required: true, message: '请上传主图', trigger: 'blur' }],
        solar: [{ required: true, message: '请选择生日', trigger: 'blur' }],
        lunar: [{ required: true, message: '请选择生日', trigger: 'blur' }],
        dengji: [{ required: true, message: '请选择运营状态', trigger: 'blur' }],
        birthdayType: [{ required: true, message: '请选择生日类别', trigger: 'blur' }],
      },
      dengjiList: [],
      salonList: [],
      keeperList: [],
      genderList: [],
      demandLevelList: [],
      birthdayTypeList: [],
      EditMode: EditMode,
      imgUpld: {
        isUploading: false,
        mainPicUrl: undefined,
        subPicList: [], // { name:'', url:'', saveName:'' }
      },
      calendarPage: {
        showCalendar: false,
        showLeepMonth: false,
        selectedDate: undefined, // 已选中的顾客生日
        inputYear: '',
        inputMonth: '',
        isJumping: false,
        jmpLeepMonth: false,
        lunarTitle: '',
        curMonth: undefined, // 用于更新阴历标题
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  created() {
    this.EditMode.m = this.mode;

    this.dengjiList.push({ id: 0, name: '正常' });
    this.dengjiList.push({ id: 1, name: '预警' });
    this.dengjiList.push({ id: 2, name: '失速' });
    this.dengjiList.push({ id: 3, name: '放弃' });

    this.genderList.push({ id: 0, name: '男' });
    this.genderList.push({ id: 1, name: '女' });

    this.birthdayTypeList.push({ id: 1, name: '公历生日' });
    this.birthdayTypeList.push({ id: 2, name: '农历生日' });

    this.demandLevelList.push({ id: 0, name: '未设置' });
    this.demandLevelList.push({ id: 1, name: '小' });
    this.demandLevelList.push({ id: 2, name: '中' });
    this.demandLevelList.push({ id: 3, name: '大' });
  },
  mounted() {
    this.prepareData();
    if (this.EditMode.m == EditMode.EditClerk) {
      this.initEditClerk();
    } else {
      this.$refs.refClerkForm.resetFields();
      this.clerk = Object.assign({}, this.clerkAddDefault);
    }
  },
  methods: {
    prepareData: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      try {
        this.loadSalon();
        this.loadKeepers();
      } catch (err) {
      } finally {
        this.isFetching = false;
      }
    },
    initEditClerk: function () {
      if (this.clerk.pic) {
        this.imgUpld.mainPicUrl = WebConst.clerkImageStaticUrl2Uri(this.clerk.pic);
      }
      if (this.clerk.images) {
        this.clerk.images
          .split(';')
          .map(x => x.trim())
          .filter(x => !!x)
          .forEach(x => {
            this.imgUpld.subPicList.push({
              name: '...' + x.substring(32),
              url: WebConst.getClerkImageUriByName(x),
              saveName: x,
            });
          });
      }
      this.pageRenderKey += 1;
    },
    /**
     * 公历转农历
     * @param {Date} date
     * @param {string} data
     * @return {string}
     */
    showLunar(date, data) {
      if (!date) {
        return '';
      }
      if (data.type === 'current-month') {
        this.updateCalTitle(date);
      }
      const lunarObj = lunar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
      return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
    },
    updateCalTitle: async function (date) {
      const curMonth = `${date.getFullYear()}${date.getMonth()}`;
      if (this.calendarPage.curMonth === curMonth) {
        return;
      }
      // 每个月只需要调用一次 solar2lunar 函数
      this.calendarPage.curMonth = curMonth;
      const lunarObj = lunar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
      const lunarTitle = `${lunarObj.lYear} 年 ${lunarObj.IMonthCn}`;
      this.calendarPage.lunarTitle = lunarTitle;
    },
    handleClickCalDate: async function (inDate) {
      if (!inDate) {
        return;
      }
      const errAlertMsg = '只能选择今天之前的日期';
      const now = new Date();
      if (now.getTime() <= inDate.getTime()) {
        MessageBox.alert(errAlertMsg);
        return;
      }
      if (now.getFullYear() == inDate.getFullYear() && now.getDate() == inDate.getDate()) {
        MessageBox.alert(errAlertMsg);
        return;
      }
      const lunarObj = lunar.solar2lunar(inDate.getFullYear(), inDate.getMonth() + 1, inDate.getDate());
      // console.log('lunarObj', lunarObj);
      const clerkSolarBirthday = `${lunarObj.cYear}年${lunarObj.cMonth}月${lunarObj.cDay}日`;
      const clerkLunarDirthday = `${lunarObj.gzYear}年${lunarObj.IMonthCn}${lunarObj.IDayCn}`;
      this.clerk.solar = clerkSolarBirthday;
      this.clerk.lunar = clerkLunarDirthday;
      this.clerk.gzn = lunarObj.gzYear;
      this.clerk.gzy = lunarObj.gzMonth;
      this.clerk.gzr = lunarObj.gzDay;
    },
    gotoInputDate: async function (jmp) {
      if (this.calendarPage.isJumping) {
        return;
      }
      const inptYear = this.calendarPage.inputYear.trim();
      const inptMonth = this.calendarPage.inputMonth.trim();
      if (!inptYear || !inptMonth) {
        return;
      }
      const now = new Date();
      try {
        const year = Number.parseInt(inptYear);
        if (year < 1900 || year > now.getFullYear()) {
          throw year;
        }
      } catch (err) {
        MessageBox.alert('请输入正确的年份');
        return;
      }
      try {
        const month = Number.parseInt(inptMonth);
        if (month < 1 || month > 12 || (inptYear == now.getFullYear() && month > now.getMonth() + 1)) {
          throw month;
        }
      } catch (err) {
        MessageBox.alert('请输入正确的月份');
        return;
      }
      let inptDate = `${inptYear}-${inptMonth}-1`;
      if (this.clerk.birthdayType == 2) {
        const leepM = lunar.leapMonth(inptYear);
        if (leepM == inptMonth) {
          this.calendarPage.showLeepMonth = true;
          if (!jmp) {
            return;
          }
        } else {
          this.calendarPage.showLeepMonth = false;
        }
        const lunarObj = lunar.lunar2solar(inptYear, inptMonth, 1, this.calendarPage.jmpLeepMonth);
        inptDate = `${lunarObj.cYear}-${lunarObj.cMonth}-${lunarObj.cDay}`;
        this.calendarPage.lunarTitle = `${lunarObj.lYear} 年 ${lunarObj.IMonthCn}`;
      }
      // jump
      this.calendarPage.selectedDate = new Date(inptDate);
    },
    loadSalon: async function () {
      let sid = this.openId;
      if (!sid) {
        sid = 0;
      }
      const errAlertMsg = '查询门店信息失败';
      this.salonList.splice(0, this.salonList.length);
      await getSalon(sid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.salonList.push(ret);
            this.clerk.sid = ret.id;
          }
        })
        .catch(err => {
          console.log('getSalon', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    loadKeepers: async function () {
      let sid = this.openId;
      if (!sid) {
        sid = 0;
      }
      const errAlertMsg = '查询管家列表失败';
      this.keeperList.splice(0, this.keeperList.length);
      await getKeepersBySid(sid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret && ret.length > 0) {
            for (const k of ret) {
              this.keeperList.push({ id: k.id, name: k.username });
            }
            if (ret.length === 1) {
              this.clerk.kid = ret[0].id;
            }
          }
        })
        .catch(err => {
          console.log('getSomeAdmins', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    handleFileBeforeUpload(file) {
      const allowFileTypes = ['jpg', 'jpeg', 'png'];
      const fileType = file.name.split('.').pop().toLowerCase();
      if (allowFileTypes.indexOf(fileType) === -1) {
        MessageBox.alert('只能上传 jpg,jpeg,png 图片!');
        return false;
      }
      if (file.size > 1024 * 500) {
        return new Promise(resolve => {
          new Compressor(file, {
            quality: 0.8,
            maxWidth: 1000,
            maxHeight: 1000,
            convertSize: 500000,
            success(result) {
              const file1 = new File([result], file.name, { type: file.type });
              resolve(file1);
            },
            error(err) {
              console.log(err.message);
            },
          });
        });
      }
      return true;
    },
    handleFileUploading(event, file, fileList) {
      this.imgUpld.isUploading = true;
    },
    handleFileUploadOk(res, file, fileList) {
      this.imgUpld.isUploading = false;
      // MessageBox.alert('图片上传完成');
    },
    handleFileUploadError(err, file, fileList) {
      this.imgUpld.isUploading = false;
    },
    handleImgMainUpload: async function (options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);
      if (this.EditMode.m === EditMode.EditClerk) {
        formData.append('id', this.clerk.id);
      }
      const errAlertMsg = '主图上传失败';
      await upload(formData)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          this.clerk.pic = ret; // TODO 保存在数据库中的暂时不改
          this.imgUpld.mainPicUrl = WebConst.clerkImageStaticUrl2Uri(ret);
        })
        .catch(err => {
          console.log('handleImgMainUpload', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.imgUpld.isUploading = false;
        });
    },
    handleImgSubUpload: async function (options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);
      if (this.EditMode.m === EditMode.EditClerk) {
        formData.append('id', this.clerk.id);
      }
      const errAlertMsg = '辅图上传失败';
      await upload(formData)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          // 辅图保存在 images 字段中, 只保存文件名; 多个文件名之间, 用英文逗号分隔
          const uri = WebConst.clerkImageStaticUrl2Uri(ret);
          const filename = WebConst.getImageFilename(ret);
          if (uri && filename) {
            this.imgUpld.subPicList.push({ name: '...' + filename.substring(32), url: uri, saveName: filename });
          }
        })
        .catch(err => {
          console.log('handleImgMainUpload', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.imgUpld.isUploading = false;
        });
    },
    handleImgSubRemove: async function (file, fileList) {
      if (file && file.status == 'success' && file.saveName) {
        const rmIdx = this.imgUpld.subPicList.findIndex(x => x.saveName === file.saveName);
        if (rmIdx !== -1) {
          this.imgUpld.subPicList.splice(rmIdx, 1);
        }
      }
    },
    /**
     * 本方法只返回基础信息页面可以编辑的信息
     * @return {Object | undefined} undefined 表示基础信息没有完善
     */
    getClerkBaseInfo() {
      let ok = false;
      this.$refs.refClerkForm.validate((valid, invalidObj) => {
        ok = valid;
      });
      if (!ok) {
        return;
      }
      const cpy = {};
      // 这里的属性拷贝, 最好和UI的顺序一致, 方便查漏补缺
      cpy.sid = this.clerk.sid;
      cpy.kid = this.clerk.kid;
      cpy.cname = this.clerk.cname;
      cpy.sex = this.clerk.sex;
      cpy.dengji = this.clerk.dengji;
      cpy.ccode = this.clerk.ccode;
      cpy.solar = this.clerk.solar;
      cpy.lunar = this.clerk.lunar;
      cpy.gzn = this.clerk.gzn; // 干支: 年, 选生日的时候赋值
      cpy.gzy = this.clerk.gzy; // 干支: 月, 选生日的时候赋值
      cpy.gzr = this.clerk.gzr; // 干支: 日, 选生日的时候赋值
      cpy.btime = this.clerk.btime;
      cpy.birthdayType = this.clerk.birthdayType;
      cpy.city = this.clerk.city;
      cpy.address = this.clerk.address;
      cpy.tel = this.clerk.tel;
      cpy.demand = this.clerk.demand;
      cpy.pic = this.clerk.pic; // 主图
      cpy.images = null; // 辅图
      // 其他根据 UI 填写数据, 计算出来的属性
      if (this.imgUpld.subPicList && this.imgUpld.subPicList.length > 0) {
        const subImageNames = this.imgUpld.subPicList.map(x => x.saveName).filter(x => !!x);
        if (subImageNames && subImageNames.length > 0) {
          cpy.images = subImageNames.join(';'); // 和后端约定的规则
        }
      }
      const keeper = this.keeperList.find(x => x.id === cpy.kid);
      if (keeper) {
        cpy.kname = keeper.name;
      }
      if (this.EditMode.m === EditMode.AddNewClerk) {
        const salon = this.salonList.find(x => x.id === cpy.sid);
        if (salon) {
          cpy.sname = salon.sname;
          cpy.ccode = salon.code + '-c'; // 只有新增的顾客, 需要这写(老代码的逻辑)
        }
      }
      return cpy;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 5px 0;
}

::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 15px;
}

::v-deep .radio_list {
  width: 100%;
  height: auto;
  padding: 0 3px 0 0;

  .el-radio {
    margin-right: 10px;
  }

  .el-radio__label {
    padding-left: 5px;
  }
}

.upld_img_m {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 220px;
    height: 220px;
    line-height: 220px;
    text-align: center;
  }
  .avatar {
    width: 220px;
    height: 220px;
    display: block;
  }
}

.upld_img_s {
  width: 100%;
}

::v-deep .el-calendar-table td:not(.is-selected) .not-current-month {
  color: #909399;
}

::v-deep .el-calendar-table .el-calendar-day {
  height: 50px;
}

::v-deep .foot_inpt_date .el-input__inner {
  padding: 0 5px;
}

.pick_birthday {
  width: 40vw;
  height: 80vh;
  padding: 50px 0 0 0;
  position: fixed;
  top: 0;
  left: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;

  .foot_inpt_date {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .pick_birthday_close {
    position: absolute;
    top: 10px;
    right: 16px;
    cursor: pointer;
  }

  .pick_birthday_title {
    width: 160px;
    height: auto;
    text-align: center;
    color: #3f3946;
    font-size: 18px;
    font-weight: 500;
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
  }

  .date_cell {
    width: 100%;
    height: auto;
  }

  .lunar-content {
    position: relative;
    padding: 0 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0px;

    .lunar {
      width: 90%;
      text-align: center;
      font-size: 14px;
      transform: scale(0.8);
    }

    .selected {
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }

  .is-selected {
    color: #1989fa;
  }
}
</style>
